<template>
    <div>
        <avue-form ref="form" v-model="obj" :option="option"
                   @reset-change="emptytChange"
                   @submit="submit">
            <template #expireTimeButton="expireTimeButton">
                <div>
                    <el-button size="small" @click="obj.expireTime = getExpireTime(1)">1天</el-button>
                    <el-button size="small" @click="obj.expireTime = getExpireTime(3)">3天</el-button>
                    <el-button size="small" @click="obj.expireTime = getExpireTime(10)">10天</el-button>
                    <el-button size="small" @click="obj.expireTime = getExpireTime(15)">半月</el-button>
                    <el-button size="small" @click="obj.expireTime = getExpireTime(30)">一月</el-button>
                    <el-button size="small" @click="obj.expireTime = getExpireTime(365)">半年</el-button>
                    <el-button size="small" @click="obj.expireTime = getExpireTime(365)">一年</el-button>
                    <el-button size="small" @click="obj.expireTime = getExpireTime(9999)">永久</el-button>
                </div>
            </template>
        </avue-form>

        <!--   生成ak/sk 后展示-->
        <el-dialog title="AK/SK 查看" v-if="akskDialogVisible" :visible.sync="akskDialogVisible" width="50%" top="22vh"  :before-close="handleClose">
            <div style="margin-top: 0px"> AK/SK 仅在当前页面进行展示, 请复制保存, 关闭后将不在以任何形式展示</div>
            <div style="margin-top: 20px"><span style="font-weight: bold;"> - AccessKey:</span> {{ resData.accessKey }}</div>
            <div style="margin-top: 2px;margin-bottom: 20px"><span style="font-weight: bold;"> - SecretKey:</span> {{ resData.secretKey }}</div>
        </el-dialog>
    </div>
</template>

<script>

import dayjs from "dayjs";

export default {
    data() {
        return {
            obj: {},
            initSuccess: false,
            defaultData: {
                userId: this.userId,
                accessKey: null,
                secretKey: null,
                expireTime: this.getExpireTime(1),
                remarks: null,
            },
            sysUsers: [],
            // 生成ak/sk后的数据
            resData: {},
            akskDialogVisible: false
        }
    },
    props: {
        uri: {},
        userId: ""
    },
    computed: {
        option() {
            return {
                // size: "small",
                submitBtn: true,
                emptyBtn: true,
                submitText: '提交',
                emptyText: "关闭",
                column: [
                    {
                        label: '用户',
                        prop: 'userId',
                        labelWidth: 110,
                        maxlength: 64,
                        showWordLimit: true,
                        span: 22,
                        filterable: true,
                        type: 'select',
                        dicData: this.sysUsers,  // xxxDic 中的的字段映射
                        props: {
                            label: "fullName",
                            value: "id"
                        },
                        rules: [{
                            required: true,
                            message: "请输入 用户Id",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '过期时间',
                        prop: 'expireTime',
                        type: 'datetime',
                        labelWidth: 110,
                        format: 'yyyy-MM-dd HH:mm:ss',
                        valueFormat: 'yyyy-MM-dd HH:mm:ss',
                        span: 10,
                        rules: [{
                            required: true,
                            message: "请选择 有效期",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: '',
                        prop: 'expireTimeButton',
                        span: 14,
                    },
                    {
                        label: '备注',
                        prop: 'remarks',
                        labelWidth: 110,
                        maxlength: 256,
                        showWordLimit: true,
                        span: 22,
                        rules: [{
                            required: false,
                            message: "请输入 备注",
                            trigger: "blur"
                        }]
                    },

                ]
            }
        }
    },
    created() {
        this.obj = this.defaultData;
        this.findSysUsers();
        this.initSuccess = true;
    },
    methods: {
        emptytChange() {
            this.$emit('closeDialog', false);
        },
        submit(form, done) {
            this.crud.post(this.uri.info, this.obj).then((res) => {
                if (res.data.code == 200) {
                    this.akskDialogVisible = true;
                    this.resData = res.data.data
                }
                done(form);
            }).catch((err) => {
                console.error(err);
                done(form);
            })
        },
        // 查询系统人员
        async findSysUsers() {
            let res = await this.crud.get(this.uri.sysUserList);
            this.sysUsers = res.data.data;
        },
        getExpireTime(n) {
            if (n === 9999) {
                return "2099-12-31 23:59:59"
            } else {
                const endTime = dayjs().add(n, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss');
                console.log(endTime)
                return endTime
            }
        },
        handleClose(done) {
            this.$confirm('ak/sk 仅展示一次, 关闭后将不在以任何形式展示, 确认关闭？')
                .then(_ => {
                    this.$emit('closeDialog', true);
                    done();
                })
                .catch(_ => {
                });
        }
    }
}
</script>
